<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="产研进度表" data-page-identification="n_shwei9snen">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_3uhb02odw3 自定义模板_vene908p7u -->
      <!--            修改目标/备注-->
      <a-modal
        :visible="changeState.visible"
        :title="changeState.title"
        :mask-closable="false"
        :keybord="false"
        centered
        @cancel="changeState.visible = false"
        @ok="submitEdit"
        :ok-button-props="{ loading: changeState.loading }"
      >
        <a-textarea v-model:value="changeState.content" />
      </a-modal>
      <!--            修改目标/备注-->
      <!--          修改年度目标-->
      <a-modal
        :visible="state.changeTargetVisible"
        :mask-closable="false"
        title="修改目标"
        @cancel="state.changeTargetVisible = false"
        @ok="confirmTarget"
        centered
        width="800px"
        :ok-button-props="{ loading: state.changeTargetLoading }"
        :body-style="{ maxHeight: '700px', overflowY: 'auto', paddingBottom: '0px' }"
      >
        <div class="target-form">
          <a-form :model="state.changeTargetFrom">
            <a-row>
              <a-col :span="24">
                <a-form-item label="年度目标">
                  <a-textarea :autosize="{ minRows: 2, maxRows: 5 }" v-model:value="state.changeTargetFrom.yearGoals" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="Q1目标">
                  <a-textarea :autosize="{ minRows: 2, maxRows: 5 }" v-model:value="state.changeTargetFrom.q1Goals" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="Q2目标">
                  <a-textarea :autosize="{ minRows: 2, maxRows: 5 }" v-model:value="state.changeTargetFrom.q2Goals" />
                </a-form-item>
              </a-col>

              <a-col :span="24">
                <a-form-item label="Q3目标">
                  <a-textarea :autosize="{ minRows: 2, maxRows: 5 }" v-model:value="state.changeTargetFrom.q3Goals" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="Q4目标">
                  <a-textarea :autosize="{ minRows: 2, maxRows: 5 }" v-model:value="state.changeTargetFrom.q4Goals" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-modal>
      <!--          修改年度目标-->
      <!--          修改周汇报-->
      <a-modal
        :visible="state.changeWeekVisible"
        :title="state.changeWeekTitle"
        @cancel="state.changeWeekVisible = false"
        @ok="confirmWeek"
        :ok-button-props="{ loading: state.changeWeekLoading }"
        centered
      >
        <a-textarea v-model:value="state.changeWeekValue" :rows="8" />
      </a-modal>
      <!--          修改周汇报-->
      <!--          展示设置-->
      <a-modal
        :visible="state.settingVisible"
        title="配置"
        centered
        @cancel="state.settingVisible = false"
        :footer="null"
        :body-style="{
                    paddingTop: '0px'
                }"
      >
        <div class="check-target">
          <a-checkbox-group v-model:value="state.targetChecked" :options="state.targetList" />
        </div>
        <div>
          <a-radio-group v-model:value="selectedMonth" @change="onMonthChange" style="width: 100%">
            <a-row>
              <a-col
                :span="4"
                v-for="(month, index) in months"
                :key="month"
                :style="{
                                    marginBottom: index > 6 ? '0' : '16px'
                                }"
              >
                <a-radio :value="month">{{ month }}月</a-radio>
              </a-col>
            </a-row>
          </a-radio-group>
        </div>
      </a-modal>
      <!--          展示设置-->
      <!--          关联项目-->
      <a-modal
        :visible="state.associateVisible"
        title="关联项目"
        centered
        @ok="confirmassociate"
        width="800px"
        @cancel="state.associateVisible = false"
        :ok-button-props="{ loading: state.associateLoading }"
        :body-style="{
                    paddingBottom: '0px'
                }"
      >
        <a-form :model="state.associatedProjectList" ref="associatedRef">
          <div class="my-page">
            <div class="module-item" v-for="(item, index) in state.associatedProjectList" :key="index">
              <div class="form-content">
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="项目名称"
                      :rules="[{ required: true, message: '请选择项目！', trigger: 'blur' }]"
                      :name="[index, 'projectSprintId']"
                      :labelCol="{ span: 8 }"
                      :wrapperCol="{ span: 16 }"
                    >
                      <a-select
                        show-search
                        v-model:value="state.associatedProjectList[index].projectSprintId"
                        :options="state.glProjectList"
                        allow-clear
                        placeholder="请选择"
                        @focus="getGlProjectList"
                        :field-names="{ label: 'projectName', value: 'projectId' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.projectName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="季度/月份"
                      :rules="[{ required: true, message: '请选择季度/月份！', trigger: 'blur' }]"
                      :name="[index, 'month']"
                      :labelCol="{ span: 8 }"
                      :wrapperCol="{ span: 16 }"
                    >
                      <a-tree-select
                        v-model:value="state.associatedProjectList[index].month"
                        show-search
                        style="width: 100%"
                        placeholder="请选择"
                        allow-clear
                        :tree-data="state.jdList"
                        :fieldNames="{
                                                    children: 'children',
                                                    label: 'nodeName',
                                                    value: 'nodeName',
                                                    key: 'nodeCode'
                                                }"
                        :filterTreeNode="
                                                    (inputValue, treeNode) => {
                                                        return (
                                                            treeNode.nodeName
                                                                .toLowerCase()
                                                                .indexOf(inputValue.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                        :max-tag-count="1"
                        @focus="getjd"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>

              <a class="add-btn" @click="handlerAddFormItem(index)">下方插入</a>
              <a class="del" @click="handlerDeleteFormItem(index)">删除</a>
            </div>
          </div>
        </a-form>
      </a-modal>
      <!--          关联项目-->
      <a-modal
        :visible="state.modalVisible"
        title="甘特图"
        width="100%"
        centered
        @cancel="ganteCancel"
        :footer="null"
        :mask-closable="false"
        destroy-on-close
        :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
      >
        <div class="modal-title">
          <div class="left">
            <a-radio-group v-model:value="state.radioValue" @change="radioChange">
              <a-radio-button value="目标">目标</a-radio-button>
              <a-radio-button value="项目">项目</a-radio-button>
            </a-radio-group>
            <div class="tip-color"> 计划进展 <div class="box1"></div> </div>
            <div class="tip-color"> 实际进展正常完成 <div class="box2"></div> </div>
            <div class="tip-color"> 实际进展延期或延期完成 <div class="box3"></div> </div>
          </div>
          <div class="right">
            <div class="right-tip" v-if="state.radioValue === '项目'">
              <a-form-item label="项目名称">
                <a-select
                  show-search
                  style="width: 200px; overflow: hidden"
                  :options="state.projectList"
                  allow-clear
                  placeholder="请选择"
                  :field-names="{ label: 'projectName', value: 'projectId' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  v-model:value="state.gantFilter.projectId"
                  @change="getGantData"
                />
              </a-form-item>
            </div>

            <div class="right-tip" v-if="state.radioValue === '目标'">
              <a-form-item label="月份" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" style="height: 32px; width: 300px" name="month">
                <a-date-picker @change="getGantData" picker="month" style="width: 100%" v-model:value="state.gantFilter.month" value-format="YYYY-MM" :allow-clear="false" />
              </a-form-item>
            </div>
            <div class="right-tip">
              <a-form-item label="任务类型">
                <a-select
                  show-search
                  style="width: 200px; overflow: hidden"
                  :options="[
                                        {
                                            label: '全部',
                                            value: 'ALL'
                                        },
                                        {
                                            label: '关键路径任务',
                                            value: 'KEYNOTE'
                                        },
                                        {
                                            label: '其它',
                                            value: ' OTHER'
                                        },
                                        {
                                            label: 'SOP任务',
                                            value: 'SOP'
                                        }
                                    ]"
                  allow-clear
                  placeholder="请选择"
                  :max-tag-count="1"
                  v-model:value="state.gantFilter.taskType"
                  @change="getGantData"
                />
              </a-form-item>
            </div>
            <a-button type="primary" @click="resetGant"> 重置 </a-button>

            <a-button type="primary" @click="scrollToTodayColumn">今天</a-button>
          </div>
        </div>
        <div class="kb-table-box">
          <a-table
            bordered
            :pagination="false"
            :columns="state.kbColumns"
            :data-source="state.kbDataSource"
            :scroll="{ x: 'max-content', y: 600 }"
            ref="kbTbRef"
            :loading="state.gantLoading"
            rowKey="key"
            @resizeColumn="handleTaskResizeColumn"
          >
            <template #headerCell="{ title, column }">
              <template v-if="column.today">
                <div class="colun-today"
                  >{{ title }}
                  <div class="today-line"></div>
                  <div class="today-flag">今天</div>
                </div>
              </template>
            </template>
            <template #bodyCell="{ column, record, text }">
              <template
                v-if="
                                    ![
                                        '项目名称',
                                        '月份',
                                        '总目标',
                                        '子目标',
                                        '用户故事',
                                        '任务名称',
                                        '任务状态',
                                        '计划开始',
                                        '计划结束',
                                        '负责人'
                                    ].includes(column.title)
                                "
              >
                <div class="color-div" v-if="text">
                  <div
                    class="div-item"
                    :style="{
                                            backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                        }"
                  ></div>
                  <div class="line-table" v-if="text.today"></div>
                  <div
                    class="div-item"
                    :style="{
                                            backgroundColor: getColor(text.actual)
                                        }"
                  >
                  </div>
                </div>
                <div v-else class="color-div">
                  <div class="div-item"></div>
                  <div class="line-table" v-if="column.today"></div>
                  <div class="div-item"> </div>
                </div>
              </template>
              <template v-if="column.title === '用户故事'">
                <div class="default-gant-title-xmjd" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                }}</div>
              </template>
              <template v-if="column.title === '任务名称'">
                <div class="default-gant-title-rwmc" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                }}</div>
              </template>
              <template v-if="column.title === '总目标'">
                <div class="default-gant-title-total" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                }}</div>
              </template>
              <template v-if="column.title === '子目标'">
                <div class="default-gant-title-zmb" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                }}</div>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <div class="body">
        <div class="top-search">
          <a-row style="height: 32px">
            <a-col :span="5" style="height: 32px">
              <a-form-item label="年份" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                <a-date-picker v-model:value="state.searchForm.dateYear" picker="year" style="width: 100%" value-format="YYYY" :allow-clear="false" />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px">
              <a-form-item label="项目名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-select
                  mode="multiple"
                  v-model:value="state.searchForm.projectIdList"
                  placeholder="请选择"
                  :options="state.searchProjectList"
                  :field-names="{ label: 'projectName', value: 'projectId' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  :max-tag-count="1"
                  allow-clear
                  show-search
                />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px">
              <a-form-item label="项目类型" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-select
                  placeholder="请选择"
                  v-model:value="state.searchForm.projectType"
                  :options="[
                                        {
                                            label: '平台',
                                            value: '平台'
                                        },
                                        {
                                            label: '交付',
                                            value: '交付'
                                        }
                                    ]"
                  allow-clear
                  show-search
                />
              </a-form-item>
            </a-col>
            <a-col :span="6" style="height: 32px">
              <a-form-item label="任务负责人" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
                <!--                                <a-tree-select-->
                <!--                                    placeholder="请选择"-->
                <!--                                    v-model:value="state.searchForm.userList"-->
                <!--                                    show-search-->
                <!--                                    style="width: 100%"-->
                <!--                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"-->
                <!--                                    allow-clear-->
                <!--                                    multiple-->
                <!--                                    treeDefaultExpandAll-->
                <!--                                    :tree-data="userListData"-->
                <!--                                    tree-node-filter-prop="name"-->
                <!--                                    :field-names="{-->
                <!--                                        children: 'children',-->
                <!--                                        label: 'name',-->
                <!--                                        value: 'name'-->
                <!--                                    }"-->
                <!--                                />-->
                <a-tree-select
                  placeholder="请选择"
                  v-model:value="state.searchForm.userList"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  allow-clear
                  multiple
                  treeDefaultExpandAll
                  :tree-data="userListData"
                  tree-node-filter-prop="label"
                  :maxTagCount="2"
                  :field-names="{
                                        children: 'children',
                                        label: 'label',
                                        value: 'value'
                                    }"
                />
              </a-form-item>
            </a-col>
            <a-col :span="3" style="height: 32px; display: flex; justify-content: end">
              <a-space>
                <a-button type="primary" @click="getData(true)">查询</a-button>
                <a-button type="primary" ghost @click="resetData">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </div>
        <div class="bottom-div">
          <div class="bottom-title">
            <div class="table-top-title">
              <div>项目列表</div>
            </div>
            <div style="display: flex; gap: 16px">
              <div class="tip-color"> 计划进展 <div class="box1"></div> </div>
              <div class="tip-color"> 实际进展正常完成 <div class="box2"></div> </div>
              <div class="tip-color"> 实际进展延期或延期完成 <div class="box3"></div> </div>
              <a-space style="position: relative">
                <a-button type="primary" @click="showSetting">显示设置</a-button>
                <a-button type="primary" @click="handleExpandAll" v-if="!state.isExpandAll">全部展开 </a-button>
                <a-button type="primary" @click="handleCollapseAll" v-else>全部折叠</a-button>
              </a-space>
            </div>
          </div>
          <div class="no-data-img" v-if="state.tableData.length == 0">
            <div class="no-data-msg">暂无数据</div>
          </div>
          <a-spin :spinning="state.tableLoading" tip="加载中...">
            <div class="scroll-content">
              <div class="gd-item" v-for="(item, index) in state.tableData" :key="item.projectId">
                <a-collapse :bordered="false" expandIconPosition="right" v-model:activeKey="state.collapseKey" collapsible="disabled">
                  <template #expandIcon="{ isActive }"></template>
                  <a-collapse-panel :key="item.projectId">
                    <template #header>
                      <div class="collapse-title">
                        <div class="collapse-title-left">
                          <div class="title-icon"></div>
                          <div class="title-text">{{ item.projectName }}</div>
                        </div>
                        <div class="father-right">
                          <div class="father-bottom" @click.stop="onClick">
                            <div class="father-right-btn">
                              <a-button type="primary" ghost size="small" class="btn-item" @click="item.isTask = !item.isTask">{{ item.isTask ? '切换任务视图' : '切换用户故事视图' }} </a-button>
                              <a-button type="primary" ghost size="small" class="btn-item" @click="showChangeTarget(item)">编辑 </a-button>
                              <a-button type="primary" ghost size="small" class="btn-item" @click="showAssociate(item)">关联项目 </a-button>
                              <a-button type="primary" ghost size="small" class="btn-item" @click="showGant(item)">甘特图 </a-button>
                              <div @click="toggleCollapse(item.projectId)" class="active-btn">
                                <span style="color: #3875ff; cursor: pointer">{{
                                                                    isActive(item.projectId) ? '收起' : '展开'
                                }}</span>
                                <DoubleLeftOutlined v-if="isActive(item.projectId)" class="active-icon" />
                                <DoubleRightOutlined v-else class="active-icon" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <!--                           列表父工单-->
                    <div class="item-inner">
                      <div class="inner-item" v-if="state.targetChecked.includes('年度目标')">
                        <div class="item-left">年度目标：</div>
                        <div class="item-right">{{ item.yearGoals }}</div>
                      </div>
                      <div class="inner-item" v-if="state.targetChecked.includes('季度目标')">
                        <div class="item-left">{{ monthToQuarter[selectedMonth] }}季度目标：</div>
                        <div class="item-right">{{ getQuarterGoals(item.quarterGoals) }}</div>
                      </div>
                      <div class="inner-item" v-if="selectedMonth">
                        <div class="item-left">{{ selectedMonth }}月目标：</div>
                        <div class="item-right cursor-div" v-html="formattedMonthGoals(item.monthGoals)" @click="changeMonthGoal(item, selectedMonth)"> </div>
                      </div>
                      <div class="target-table">
                        <a-table
                          v-if="!item.isTask"
                          :columns="formatColumns(item.columns, 'task')"
                          :data-source="handleExpendData(item.projectTaskDtoList)"
                          bordered
                          :scroll="{ x: 'max-content' }"
                          :pagination="false"
                          @resizeColumn="handleResizeColumn"
                        >
                          <template #bodyCell="{ column, record, text }">
                            <!-- 展开/折叠按钮 -->
                            <template v-if="column.dataIndex === 'opration'">
                              <a-button type="link" @click="toggleExpand1(record)">
                                {{ record.expanded ? '折叠' : '展开' }}
                              </a-button>
                            </template>
                            <template
                              v-if="
                                                                column.dataIndex === 'taskName' ||
                                                                column.dataIndex === 'taskDesc' ||
                                                                column.dataIndex === 'subGoalName' ||
                                                                column.dataIndex === 'taskStatus'
                                                            "
                            >
                              <div
                                v-html="formatText(text)"
                                :style="{
                                                                    height: record.expanded ? 'auto' : '20px',
                                                                    overflow: 'hidden',
                                                                    whiteSpace: 'normal',
                                                                    textOverflow: 'ellipsis',
                                                                    textAlign:
                                                                        column.dataIndex === 'subGoalName'
                                                                            ? 'center'
                                                                            : 'left',

                                                                    fontWeight:
                                                                        column.title === '子目标' ? '600' : '400',
                                                                    cursor:
                                                                        column.dataIndex === 'subGoalName' ||
                                                                        column.dataIndex === 'taskDesc'
                                                                            ? 'pointer'
                                                                            : ''
                                                                }"
                                @click="changeTask(record, column.dataIndex)"
                              ></div>
                            </template>

                            <template
                              v-if="
                                                                ![
                                                                    '子目标',
                                                                    '关键路径任务',
                                                                    '任务状态',
                                                                    '任务备注',
                                                                    '操作'
                                                                ].includes(column.title)
                                                            "
                            >
                              <div class="color-div" v-if="text">
                                <div
                                  class="div-item"
                                  :style="{
                                                                        backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                                                    }"
                                ></div>
                                <div class="line-table" v-if="text.today"></div>
                                <div
                                  class="div-item"
                                  :style="{
                                                                        backgroundColor: getColor(text.actual)
                                                                    }"
                                >
                                </div>
                              </div>
                              <div v-else class="color-div">
                                <div class="div-item"></div>
                                <div class="line-table" v-if="column.today"></div>
                                <div class="div-item"> </div>
                              </div>
                            </template>
                            <!-- 其他列的内容 -->
                          </template>
                        </a-table>
                        <a-table
                          v-else
                          :columns="formatColumns(item.columns, 'story')"
                          :data-source="handleExpendData(item.projectStoryDtoList)"
                          bordered
                          :scroll="{ x: 'max-content' }"
                          :pagination="false"
                          @resizeColumn="handleResizeColumn"
                        >
                          <template #bodyCell="{ column, record, text }">
                            <!-- 展开/折叠按钮 -->
                            <template v-if="column.dataIndex === 'opration'">
                              <a-button type="link" @click="toggleExpand1(record)">
                                {{ record.expanded ? '折叠' : '展开' }}
                              </a-button>
                            </template>
                            <template
                              v-if="
                                                                column.dataIndex === 'storyName' ||
                                                                column.dataIndex === 'storyDesc' ||
                                                                column.dataIndex === 'subGoalName' ||
                                                                column.dataIndex === 'storyStatus'
                                                            "
                            >
                              <div
                                v-html="formatText(text)"
                                :style="{
                                                                    height: record.expanded ? 'auto' : '20px',
                                                                    overflow: 'hidden',
                                                                    whiteSpace: 'normal',
                                                                    textOverflow: 'ellipsis',
                                                                    textAlign:
                                                                        column.dataIndex === 'subGoalName'
                                                                            ? 'center'
                                                                            : 'left',

                                                                    fontWeight:
                                                                        column.title === '子目标' ? '600' : '400',
                                                                    cursor:
                                                                        column.dataIndex === 'subGoalName' ||
                                                                        column.dataIndex === 'storyDesc'
                                                                            ? 'pointer'
                                                                            : ''
                                                                }"
                                @click="changeStory(record, column.dataIndex)"
                              ></div>
                            </template>

                            <template
                              v-if="
                                                                ![
                                                                    '子目标',
                                                                    '关键路径用户故事',
                                                                    '用户故事状态',
                                                                    '用户故事备注',
                                                                    '操作'
                                                                ].includes(column.title)
                                                            "
                            >
                              <div class="color-div" v-if="text">
                                <div
                                  class="div-item"
                                  :style="{
                                                                        backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                                                    }"
                                ></div>
                                <div class="line-table" v-if="text.today"></div>
                                <div
                                  class="div-item"
                                  :style="{
                                                                        backgroundColor: getColor(text.actual)
                                                                    }"
                                >
                                </div>
                              </div>
                              <div v-else class="color-div">
                                <div class="div-item"></div>
                                <div class="line-table" v-if="column.today"></div>
                                <div class="div-item"> </div>
                              </div>
                            </template>
                            <!-- 其他列的内容 -->
                          </template>
                        </a-table>
                      </div>
                    </div>

                    <!--                           列表父工单-->
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
          </a-spin>
        </div>
      </div>
      <!-- end vid_3uhb02odw3 自定义模板_vene908p7u -->
      <!-- begin vid_c84l04d0cx 图片_e87qwsnc38 -->
      <al-image
        v-if="false"
        class="vid_c84l04d0cx"
        :emptyImgSrc="''"
        :src="vid_c84l04d0cx_props.src"
      />
      <!-- end vid_c84l04d0cx 图片_e87qwsnc38 -->
      <!-- begin vid_73q2lq1lh6 容器_v1o77qfd5y -->
      <al-box v-if="false" class="vid_73q2lq1lh6">
        <!-- begin vid_npj60brgix 切换视图 -->
        <a-button v-permission="'3000000856_vid_npj60brgix'" class="vid_npj60brgix"> 切换视图 </a-button>
        <!-- end vid_npj60brgix 切换视图 -->
        <!-- begin vid_da1fgpz2cj 关联项目 -->
        <a-button v-permission="'3000000856_vid_da1fgpz2cj'" class="vid_da1fgpz2cj"> 关联项目 </a-button>
        <!-- end vid_da1fgpz2cj 关联项目 -->
        <!-- begin vid_12wvlgndoq 查看甘特图 -->
        <a-button v-permission="'3000000856_vid_12wvlgndoq'" class="vid_12wvlgndoq"> 查看甘特图 </a-button>
        <!-- end vid_12wvlgndoq 查看甘特图 -->
        <!-- begin vid_arymfcbmea 显示设置 -->
        <a-button v-permission="'3000000856_vid_arymfcbmea'" class="vid_arymfcbmea"> 显示设置 </a-button>
        <!-- end vid_arymfcbmea 显示设置 -->
        <!-- begin vid_zqyzurcrsf 编辑 -->
        <a-button v-permission="'3000000856_vid_zqyzurcrsf'" class="vid_zqyzurcrsf"> 编辑 </a-button>
        <!-- end vid_zqyzurcrsf 编辑 -->
      </al-box>
      <!-- end vid_73q2lq1lh6 容器_v1o77qfd5y -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');
// 图片 http://10.40.0.33:9001/file-storage/480680058727917568.png
import vid_c84l04d0cx_imageUrl from '@/assets/images/d4b4c016f208837768f85da2eaa6ea81.png'

    const vid_c84l04d0cx_props = reactive({
          src: vid_c84l04d0cx_imageUrl,
  })



      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  import { nextTick } from 'vue'
      const domain = window.location.hostname
      onMounted(() => {
          const currentMonth = dayjs().format('YYYY-MM')
          const currentYear = dayjs().format('YYYY')
          state.searchForm.dateYear = currentYear
          state.weekFilterDate = currentMonth
          const nowMonth = dayjs().format('M')
          let defaultMonth = months.find(item => item === nowMonth)
          if (defaultMonth) {
              selectedMonth.value = defaultMonth
          }
          getSearchProject()
          getData(true)
          getBaseUser()
      })

      const activeKey = ref('1')
      const state = reactive({
          searchForm: {
              dateYear: '',
              projectType: undefined,
              projectIdList: [],
              userList: []
          },
          tableData: [],
          collapseKey: [],
          kbColumns: [],
          gantColumns: [],
          tableLoading: false,
          gantLoading: false,
          weekLoading: false,
          kbDataSource: [],
          radioValue: '目标',
          modalVisible: false,
          settingVisible: false,
          gantFilter: {
              projectId: undefined,
              month: undefined,
              taskType: 'ALL'
          },
          weekFilterDate: undefined,
          weekData: [],
          textareaData: '',
          targetList: [
              {
                  label: '年度目标',
                  value: '年度目标'
              },
              {
                  label: '季度目标',
                  value: '季度目标'
              }
          ],
          targetList: [
              {
                  label: '年度目标',
                  value: '年度目标'
              },
              {
                  label: '季度目标',
                  value: '季度目标'
              }
          ],
          targetChecked: ['年度目标', '季度目标'],

          associatedProjectList: [],
          associateVisible: false,
          jdList: [],
          projectList: [],
          glProjectList: [],
          searchProjectList: [],
          settingLoading: false,
          associateLoading: false,
          changeWeekVisible: false,
          changeWeekTitle: '',
          changeWeekValue: '',
          changeWeekKey: '',
          changeWeekLoading: false,
          currentWeekData: {},
          changeTargetVisible: false,
          changeTargetFrom: {
              'yearGoals': '',
              'q1Goals': '',
              'q2Goals': '',
              'q3Goals': '',
              'q4Goals': ''
          },
          changeTargetLoading: false,
          sopFinish: 0,
          taskFinish: 0,
          targetFinish: 0,
          isOver: false,
          isExpandAll: false
      })
      const currentData = ref({})
      const associatedProjectItem = {
          projectSprintId: undefined,
          month: undefined,
          projectId: currentData.value.projectId
      }
      const colorMap = {
          'plan': '#FFE58F',
          'default': '#C7F870',
          'delay': '#FC4C29'
      }

      function getColor(record) {
          if (!record) return '#fff' // 默认值
          return colorMap[record] || '#C7F870' // 如果没有匹配到颜色，则返回默认颜色
      }

      function getSearchProject() {
          // 请求第一个接口
          get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/project/search').then(data => {
              const projectList = data.data

              // 请求第二个接口
              get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/project_display/search').then(data => {
                  const projectDisplayList = data.data

                  // 合并两个接口数据，筛选出 projectId 匹配的项并合并
                  const mergedList = projectList
                      .filter(project =>
                          projectDisplayList.some(displayProject => displayProject.projectId === project.projectId)
                      )
                      .map(project => {
                          const displayProject = projectDisplayList.find(
                              display => display.projectId === project.projectId
                          )
                          return {
                              ...project, // 第一个接口的数据
                              projectSort: displayProject ? displayProject.projectSort : null, // 第二个接口的数据
                              delFlag: displayProject ? displayProject.delFlag : null // 第二个接口的数据
                          }
                      })

                  // 将合并后的数据存入 state
                  state.searchProjectList = mergedList
              })
          })
      }

      const projectCoumns = ref([
          {
              title: '项目详情',
              align: 'center',
              children: [
                  {
                      title: '项目名称',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'projectName',
                      ellipsis: true,
                      customCell: ({ projectRowSpan }) => {
                          return {
                              rowSpan: projectRowSpan
                          }
                      }
                  },
                  {
                      title: '用户故事',
                      width: 100,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'storyName',
                      ellipsis: true,
                      customCell: ({ milepostRowSpan }) => {
                          return {
                              rowSpan: milepostRowSpan
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      width: 280,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'taskName',
                      ellipsis: true
                  },
                  {
                      title: '任务状态',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskStatus',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划开始',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'startTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划结束',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'endTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '负责人',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskOwner',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  }
              ]
          }
      ])
      const targetColumns = ref([
          {
              title: '项目详情',
              align: 'center',
              children: [
                  {
                      title: '月份',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'month',
                      ellipsis: true,
                      customCell: ({ monthRowSpan }) => {
                          return {
                              rowSpan: monthRowSpan
                          }
                      }
                  },
                  {
                      title: '总目标',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'goals',
                      resizable: true,
                      ellipsis: true,
                      customCell: ({ goalsRowSpan }) => {
                          return {
                              rowSpan: goalsRowSpan
                          }
                      }
                  },
                  {
                      title: '子目标',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'projectGoals',
                      resizable: true,
                      ellipsis: true,
                      customCell: ({ projectGoalsRowSpan }) => {
                          return {
                              rowSpan: projectGoalsRowSpan
                          }
                      }
                  },
                  {
                      title: '用户故事',
                      width: 100,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'storyName',
                      ellipsis: true,
                      customCell: ({ milepostRowSpan }) => {
                          return {
                              rowSpan: milepostRowSpan
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      width: 300,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'taskName',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '任务状态',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskStatus',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划开始',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'startTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划结束',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'endTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '负责人',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskOwner',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  }
              ]
          }
      ])
      const kbTbRef = ref(null)

      function scrollToTodayColumn() {
          const table = kbTbRef.value.$el.querySelector('.ant3-table-body')
          const todayColumnIndex = state.kbColumns.flatMap(col => col.children || col).findIndex(col => col.today)
          if (todayColumnIndex !== -1 && table) {
              const columnWidth = 20 // 假设每列宽度为 50，根据实际列宽度调整

              // 等待渲染完成后进行滚动
              nextTick(() => {
                  setTimeout(() => {
                      const headerCells = table.querySelectorAll('.ant-table-thead th')
                      headerCells.forEach((cell, index) => {
                          const column = state.kbColumns[index]
                          if (column.width) {
                              cell.style.width = column.width + 'px'
                          }
                      })
                      table.scrollLeft = todayColumnIndex * columnWidth - 850 // 减去 500 像素的偏移量
                  }, 100) // 可以根据需要调整延迟时间（比如 100 毫秒）
              })
          }
      }

      // 获取项目列表
      function getData(flag) {
          state.tableLoading = true
          post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/v3/search', {
              ...state.searchForm,
              month: selectedMonth.value,
              userList: selectedUserIds.value
          })
              .then(data => {
                  if (data.code !== 200) {
                      state.tableData = []
                      state.collapseKey = []
                      message.error(data.message)
                      return
                  }
                  state.tableData = data.data
                  if (flag) {
                      state.collapseKey = [data.data[0].projectId]
                  }
              })
              .finally(() => {
                  state.tableLoading = false
              })
      }

      function resetData() {
          state.searchForm.dateYear = dayjs().format('YYYY')
          state.searchForm.projectType = undefined
          state.searchForm.projectIdList = []
          getData(true)
      }

      async function showGant(record) {
          state.radioValue = '目标'
          currentData.value = record
          const currentMonth = dayjs().format('YYYY-MM')
          state.gantFilter.month = currentMonth
          state.modalVisible = true
          await getProjectList()
          getGantData()
      }

      const toolTipStyle = {
          maxWidth: '400px'
      }

      function getGantData() {
          state.gantLoading = true
          //   TODO调甘特图
          post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/gantt/search', {
              projectId: currentData.value.projectId,
              dateYear: state.searchForm.dateYear,
              taskType: state.gantFilter.taskType,
              month: selectedMonth.value,
              monthList: state.gantFilter.month ? [state.gantFilter.month, state.gantFilter.month] : undefined,
              ganttTypeEnum: state.radioValue === '目标' ? 'GOALS' : 'PROJECT',
              sprintId: state.gantFilter.projectId ? state.gantFilter.projectId : null
          })
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      state.kbDataSource = []
                      if (state.radioValue === '项目') {
                          state.kbDataSource = []
                          state.kbColumns = [...projectCoumns.value]
                      } else {
                          state.kbDataSource = []
                          state.kbColumns = [...targetColumns.value]
                      }
                      return
                  }
                  let columns = data.data.columns.map(item => {
                      return {
                          ...item, // 保留其他字段
                          children: item.children.map(child => ({
                              ...child,
                              width: 20 // 强制设置相同宽度
                          }))
                      }
                  })
                  state.gantColumns = columns
                  // 格式化函数
                  const formattedData =
                      (Array.isArray(data.data.dataSource) ? data.data.dataSource : []).map((item, index) => {
                          const { dataMap, ...rest } = item // 分离出 dataMap 和其他字段
                          return {
                              ...rest, // 保留其他字段
                              ...dataMap, // 将 dataMap 展开为直接字段
                              key: item.id || `key-${index}-${Date.now()}` // 如果有 id 字段，则使用 id 作为 key，否则使用索引和时间戳组合生成唯一的 key
                          }
                      }) || []

                  state.kbDataSource = formattedData
                  if (state.radioValue === '项目') {
                      state.kbDataSource = groupData(state.kbDataSource)
                      state.kbColumns = [...projectCoumns.value, ...state.gantColumns]
                  } else {
                      state.kbDataSource = groupTargetData(state.kbDataSource)
                      state.kbColumns = [...targetColumns.value, ...state.gantColumns]
                  }
                  state.sopFinish = data.data.sopRatio
                  state.taskFinish = data.data.userStoryRatio

                  scrollToTodayColumn()
              })
              .finally(() => {
                  state.gantLoading = false
              })
      }
      let baseListColumn = ref([
          {
              title: '子目标',
              tilte: '子目标',
              dataIndex: 'subGoalName',
              width: 200,
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      rowSpan: goalsNameRowSpan,
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          },
          {
              title: '关键路径任务',
              tilte: '关键路径任务',
              dataIndex: 'taskName',
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          },
          {
              title: '任务状态',
              tilte: '任务状态',
              dataIndex: 'taskStatus',
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          },
          {
              title: '任务备注',
              tilte: '任务备注',
              dataIndex: 'taskDesc',
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          }
      ])
      let storyListColumn = ref([
          {
              title: '子目标',
              tilte: '子目标',
              dataIndex: 'subGoalName',
              width: 200,
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      rowSpan: goalsNameRowSpan,
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          },
          {
              title: '关键路径用户故事',
              tilte: '关键路径用户故事',
              dataIndex: 'storyName',
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          },
          {
              title: '用户故事状态',
              tilte: '用户故事状态',
              dataIndex: 'storyStatus',
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          },
          {
              title: '用户故事备注',
              tilte: '用户故事备注',
              dataIndex: 'storyDesc',
              customCell: ({ goalsNameRowSpan }) => {
                  return {
                      style: {
                          padding: '0 16px'
                      }
                  }
              }
          }
      ])
      function handleExpendData(data) {
          const formattedData =
              (Array.isArray(data) ? data : []).map((item, index) => {
                  const { dataMap, ...rest } = item // 分离出 dataMap 和其他字段
                  return {
                      ...rest, // 保留其他字段
                      ...dataMap, // 将 dataMap 展开为直接字段
                      key: item.id || `key-${index}-${Date.now()}`, // 如果有 id 字段，则使用 id 作为 key，否则使用索引和时间戳组合生成唯一的 key
                      expanded: true
                  }
              }) || []

          return groupListData(formattedData)
      }
      function groupListData(data) {
          if (!data) {
              return
          }
          let currentGoalsNameIndex = ''
          let goalsNameRowSpan = 0

          return data.map((item, index) => {
              // 如果 goalsNameIndex 变化，重置 goalsNameRowSpan，并计算新的 rowSpan
              if (currentGoalsNameIndex !== item.subGoalName) {
                  currentGoalsNameIndex = item.subGoalName
                  goalsNameRowSpan = 1

                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].subGoalName === item.subGoalName) {
                          goalsNameRowSpan++
                      } else {
                          break
                      }
                  }
                  item.goalsNameRowSpan = goalsNameRowSpan
              } else {
                  item.goalsNameRowSpan = 0
              }
              item.expanded = true
              return item
          })
      }
      function groupData(data) {
          let currentProjectName = ''
          let currentMilepostName = ''
          let projectRowSpan = 0
          let milepostRowSpan = 0

          return data.map((item, index) => {
              // 如果 projectName 变化，重置 projectRowSpan，并计算新的 rowSpan
              if (currentProjectName !== item.projectName) {
                  currentProjectName = item.projectName
                  projectRowSpan = 1

                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].projectName === item.projectName) {
                          projectRowSpan++
                      } else {
                          break
                      }
                  }
                  item.projectRowSpan = projectRowSpan
              } else {
                  item.projectRowSpan = 0
              }

              // 如果 storyName 变化，重置 milepostRowSpan，并计算新的 rowSpan
              if (currentMilepostName !== item.storyName) {
                  currentMilepostName = item.storyName
                  milepostRowSpan = 1

                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].storyName === item.storyName) {
                          milepostRowSpan++
                      } else {
                          break
                      }
                  }
                  item.milepostRowSpan = milepostRowSpan
              } else {
                  item.milepostRowSpan = 0
              }

              return item
          })
      }

      function groupTargetData(data) {
          let currentMilepostName = ''
          let currentProjectGoals = ''
          let currentGoals = ''
          let currentMonth = ''

          let milepostRowSpan = 0
          let projectGoalsRowSpan = 0
          let goalsRowSpan = 0
          let monthRowSpan = 0

          return data.map((item, index) => {
              let tempProjectGoals = currentProjectGoals
              // 如果 storyName 和 projectGoals 都变化，重置 milepostRowSpan，并计算新的 rowSpan
              if (currentMilepostName !== item.storyName || currentProjectGoals !== item.projectGoals) {
                  currentMilepostName = item.storyName
                  currentProjectGoals = item.projectGoals
                  milepostRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].storyName === item.storyName && data[i].projectGoals === item.projectGoals) {
                          milepostRowSpan++
                      } else {
                          break
                      }
                  }
                  item.milepostRowSpan = milepostRowSpan
              } else {
                  item.milepostRowSpan = 0
              }

              // 如果 projectGoals 变化，重置 projectGoalsRowSpan，并计算新的 rowSpan
              if (tempProjectGoals !== item.projectGoals) {
                  currentProjectGoals = item.projectGoals
                  projectGoalsRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].projectGoals === item.projectGoals) {
                          projectGoalsRowSpan++
                      } else {
                          break
                      }
                  }
                  item.projectGoalsRowSpan = projectGoalsRowSpan
              } else {
                  item.projectGoalsRowSpan = 0
              }

              // 如果 goals 变化，重置 goalsRowSpan，并计算新的 rowSpan
              if (currentGoals !== item.goals) {
                  currentGoals = item.goals
                  goalsRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].goals === item.goals) {
                          goalsRowSpan++
                      } else {
                          break
                      }
                  }
                  item.goalsRowSpan = goalsRowSpan
              } else {
                  item.goalsRowSpan = 0
              }

              // 如果 month 变化，重置 monthRowSpan，并计算新的 rowSpan
              if (currentMonth !== item.month) {
                  currentMonth = item.month
                  monthRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].month === item.month) {
                          monthRowSpan++
                      } else {
                          break
                      }
                  }
                  item.monthRowSpan = monthRowSpan
              } else {
                  item.monthRowSpan = 0
              }

              return item
          })
      }
      function resetGant() {
          state.gantFilter.projectId = undefined
          state.gantFilter.taskType = 'ALL'
          const currentMonth = dayjs().format('YYYY-MM')
          state.gantFilter.month = currentMonth
          getGantData()
      }

      // 显示修改周工作汇报
      function showChangeWeek(column, record, id) {
          if (column.title === '关键路径任务' || column.title === '子目标') {
              return
          }
          // const { createBy, createById, createTime, delFlag, ...oldData } = record
          state.currentWeekData = record
          state.currentWeekData.id = id
          state.changeWeekTitle = column.title
          state.changeWeekVisible = true
          state.changeWeekValue = record[column.dataIndex]
          state.changeWeekKey = column.dataIndex
      }

      // 保存周
      function confirmWeek() {
          state.changeWeekLoading = true
          let value = state.currentWeekData[state.changeWeekKey]
          state.currentWeekData[state.changeWeekKey] = state.changeWeekValue
          post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/week_report', {
              'projectId': state.currentWeekData.id,
              'goalsId': state.currentWeekData.goalsIdIndex,
              'taskId': state.currentWeekData.taskIdIndex,
              'weekDate': state.changeWeekTitle,
              'overallProgressDescription': state.changeWeekValue
          })
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  } else {
                      message.success(data.message)
                      state.changeWeekVisible = false
                      getData()
                  }
              })
              .catch(err => {
                  state.currentWeekData[state.changeWeekKey] = value
              })
              .finally(() => {
                  state.changeWeekLoading = false
              })
      }

      // 显示更改目标
      function showChangeTarget(record) {
          state.changeTargetFrom = cloneDeep(record)
          state.changeTargetVisible = true
      }

      // 保存目标
      function confirmTarget() {
          put('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals', {
              ...state.changeTargetFrom,
              dateYear: state.searchForm.dateYear
          }).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              message.success(data.message)
              state.changeTargetVisible = false
              getData()
          })
      }

      function radioChange() {
          state.kbDataSource = []
          if (state.radioValue === '项目') {
              state.gantFilter.month = undefined
          } else {
              state.gantFilter.projectId = undefined
              const currentMonth = dayjs().format('YYYY-MM')
              state.gantFilter.month = currentMonth
          }
          getGantData()
      }

      function ganteCancel() {
          state.modalVisible = false
          state.gantFilter.month = undefined
          state.gantFilter.taskType = 'ALL'
          state.gantFilter.projectId = undefined
          state.kbDataSource = []
          state.kbDataSource = []
      }

      // 显示关联
      function showAssociate(record) {
          currentData.value = record
          getGlProjectList()
          // getjd()
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/quarter_related/search/${currentData.value.projectId}`
          ).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.associatedProjectList = data.data
              if (state.associatedProjectList.length == 0) {
                  state.associatedProjectList = [{ ...associatedProjectItem.value }]
              }
              state.associateVisible = true
          })
      }

      const associatedRef = ref(null)

      //     报存关联
      function confirmassociate() {
          associatedRef.value.validate().then(data => {
              state.associateLoading = true
              const params = state.associatedProjectList.map(item => {
                  return {
                      ...item,
                      projectId: currentData.value.projectId
                  }
              })
              post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/quarter_related', params)
                  .then(data => {
                      if (data.code !== 200) {
                          message.error(data.message)
                          return
                      }
                      message.success(data.message)
                      state.associateVisible = false
                      getData()
                  })
                  .finally(() => {
                      state.associateLoading = false
                  })
          })
      }

      //删除一个模块
      function handlerDeleteFormItem(index) {
          if (state.associatedProjectList.length == 1) {
              return
          }
          state.associatedProjectList.splice(index, 1)
      }

      // 新插一条模块
      function handlerAddFormItem(index) {
          if (index >= state.associatedProjectList.length - 1) {
              state.associatedProjectList.push({ ...associatedProjectItem })
          } else {
              // 否则使用 splice 方法在 index 后插入
              state.associatedProjectList.splice(index + 1, 0, { ...associatedProjectItem })
          }
      }

      //     获取季度
      function getjd() {
          get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/q_m_tree/search ').then(data => {
              state.jdList = data.data
          })
      }

      //     获取项目
      function getProjectList() {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/search/related/${currentData.value.projectId} `
          ).then(data => {
              state.projectList = data.data
          })
      }

      //     获取关联项目项目
      function getGlProjectList() {
          get(`/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/search/${currentData.value.projectId} `).then(
              data => {
                  state.glProjectList = data.data
              }
          )
      }

      // 计算两个日期之间的月份差
      const getMonthDifference = (startDate, endDate) => {
          const start = new Date(startDate + '-01') // 使用1号作为日期，方便处理
          const end = new Date(endDate + '-01')

          // 获取两个日期之间的月份差
          return (end.getFullYear() - start.getFullYear()) * 12 + end.getMonth() - start.getMonth()
      }

      //     列表重构
      function toggleCollapse(id) {
          if (isActive(id)) {
              // 如果当前面板是展开的，移除它的 ID
              state.collapseKey = state.collapseKey.filter(key => key !== id)
          } else {
              // 否则，将它的 ID 添加到 collapseKey 中
              state.collapseKey.push(id)
          }
      }
      function isActive(id) {
          return state.collapseKey.includes(id) // 检查该 ID 是否在 collapseKey 中
      }

      // 切换展开/折叠状态
      const toggleExpand = record => {
          record.expanded = !record.expanded
      }
      const toggleExpand1 = record => {
          record.expanded = !record.expanded
      }
      function handleExpandAll() {
          state.isExpandAll = true
          state.tableData.forEach(item => {
              state.collapseKey.push(item.projectId)
          })
          state.tableData.forEach(item => {
              item.projectTaskDtoList.forEach(child => {
                  child.expanded = true
              })
          })
      }
      //     全部折叠
      function handleCollapseAll() {
          state.isExpandAll = false
          state.collapseKey = []
          state.tableData.forEach(item => {
              item.projectTaskDtoList.forEach(child => {
                  child.expanded = false
              })
          })
      }

      const selectedMonth = ref(null) // Store selected month

      // 月份列表映射
      const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      const monthsMap = {
          '1月': 'janGoalsList',
          '2月': 'febGoalsList',
          '3月': 'marGoalsList',
          '4月': 'aprGoalsList',
          '5月': 'mayGoalsList',
          '6月': 'junGoalsList',
          '7月': 'julGoalsList',
          '8月': 'augGoalsList',
          '9月': 'sepGoalsList',
          '10月': 'octGoalsList',
          '11月': 'novGoalsList',
          '12月': 'decGoalsList'
      }

      // 季度映射
      const monthToQuarter = {
          '1': 'Q1',
          '2': 'Q1',
          '3': 'Q1',
          '4': 'Q2',
          '5': 'Q2',
          '6': 'Q2',
          '7': 'Q3',
          '8': 'Q3',
          '9': 'Q3',
          '10': 'Q4',
          '11': 'Q4',
          '12': 'Q4'
      }

      // Get the goals for the selected month
      const getMonthGoals = (month, item) => {
          if (!month) return null
          const monthGoalsKey = monthsMap[month]
          return item[monthGoalsKey] || '暂无目标'
      }

      // Get the goals for the quarter based on the selected month
      const getQuarterGoals = target => {
          if (!target) return null
          return target
      }

      function showSetting() {
          state.settingVisible = true
      }
      function onMonthChange() {
          getData(true)
      }
      function formatColumns(column, type) {
          let newColumns = column.map(item => {
              return {
                  ...item,
                  children: item.children.map(child => {
                      return {
                          ...child,
                          width: '20px'
                      }
                  })
              }
          })
          let newColumn = []
          if (type === 'story') {
              newColumn = [
                  ...storyListColumn.value,
                  ...newColumns,
                  {
                      title: '操作',
                      fixed: 'right',
                      dataIndex: 'opration'
                  }
              ]
          } else {
              newColumn = [
                  ...baseListColumn.value,
                  ...newColumns,
                  {
                      title: '操作',
                      fixed: 'right',
                      dataIndex: 'opration'
                  }
              ]
          }

          return newColumn.map(item => {
              return reactive({
                  title: item.tilte,
                  ...item,
                  align: 'center',
                  resizable: item.title == '操作' ? false : true,
                  fixed:
                      item.tilte == '子目标' || item.tilte == '关键路径任务' || item.tilte == '关键路径用户故事'
                          ? 'left'
                          : ''
              })
          })
      }
      function handleTaskResizeColumn(w, col) {
          // 根据列标题来确定不同的 div
          const width = w - 10
          let div = null
          if (col.title === '任务名称') {
              div = document.querySelectorAll('.default-gant-title-rwmc')
          } else if (col.title.includes('用户故事')) {
              div = document.querySelectorAll('.default-gant-title-xmjd')
          } else if (col.title === '总目标') {
              div = document.querySelectorAll('.default-gant-title-total')
          } else if (col.title === '子目标') {
              div = document.querySelectorAll('.default-gant-title-zmb')
          }

          // 如果找到了对应的 div，更新其宽度
          if (div.length > 0) {
              div.forEach(item => {
                  item.style.width = `${width}px`
              })
          }
          col.width = w
      }
      function formattedMonthGoals(monthGoals) {
          return monthGoals?.replace(/\n/g, '<br>')
      }
      function formatText(text) {
          if (!text) return '--'
          return text.replace(/(\n|；)/g, '<br/>')
      }
      //     列表重构
      // 列宽调整函数
      const handleResizeColumn = (w, col) => {
          col.width = w // 更新列宽
      }
      const userListData = ref([])
      function getBaseUser() {
          get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/user_org').then(data => {
              const rawData = data.data
              markOrgNodesDisabled(rawData)
              userListData.value = convertUserTree(rawData)
          })
      }
      function markOrgNodesDisabled(nodes: any[]) {
          nodes.forEach(node => {
              if (node.type === 'ORG') {
                  node.disabled = true
              }
              if (Array.isArray(node.children)) {
                  markOrgNodesDisabled(node.children)
              }
          })
      }
      function fixTreeChildren(tree) {
          if (!Array.isArray(tree)) return []
          return tree.map(node => {
              const newNode = { ...node }
              if (newNode.children === null) {
                  newNode.children = []
              } else if (Array.isArray(newNode.children)) {
                  newNode.children = fixTreeChildren(newNode.children)
              }
              return newNode
          })
      }

      function convertUserTree(data) {
          return data.map(item => {
              const isUser = item.type === 'USER'
              const node: any = {
                  label: item.name,
                  value: isUser ? `${item.parentId}/${item.id}` : item.id, // 用户用 "组织ID/用户ID" 拼接
                  disabled: item.disabled || false
              }

              if (!isUser && Array.isArray(item.children) && item.children.length > 0) {
                  node.children = convertUserTree(item.children)
              }

              return node
          })
      }
      const selectedUserIds = computed(() => {
          return Array.from(new Set(state.searchForm.userList.map(v => v.split('/')[1])))
      })
      const currentEditData = ref({})
      const changeState = reactive({
          visible: false,
          title: ``,
          content: {},
          type: '',
          loading: false
      })
      function changeMonthGoal(item, month) {
          changeState.visible = true
          changeState.title = `编辑${selectedMonth.value}月月度总目标`
          changeState.content = item.monthGoals
          changeState.type = '月度总目标'
          currentEditData.value = item
      }

      const changeMap = {
          'taskDesc': '任务备注',
          'storyDesc': '用户故事备注',
          'subGoalName': '月度子目标'
      }
      function changeTask(item, dataIndex) {
          if (!['taskDesc', 'subGoalName'].includes(dataIndex)) {
              return
          }
          console.log(item, '改任务')
          console.log(item[dataIndex], 'dataIndex')
          currentEditData.value = item
          changeState.visible = true
          changeState.title = `编辑${changeMap[dataIndex]}`
          changeState.content = item[dataIndex]
          changeState.type = changeMap[dataIndex]
      }
      function changeStory(item, dataIndex) {
          if (!['storyDesc', 'subGoalName'].includes(dataIndex)) {
              return
          }
          currentEditData.value = item
          changeState.visible = true
          changeState.title = `编辑${changeMap[dataIndex]}`
          changeState.content = item[dataIndex]
          changeState.type = changeMap[dataIndex]
      }
      const paramsMap = {
          '月度总目标': 'monthGoalsId',
          '月度子目标': 'subGoalId',
          '任务备注': 'taskId',
          '用户故事备注': 'storyId'
      }
      function submitEdit() {
          changeState.loading = true
          const params = {
              type: changeState.type,
              id: currentEditData.value[paramsMap[changeState.type]],
              content: changeState.content
          }
          put(`/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/details_common_modify`, params)
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  message.success(data.message)
                  cancelChangeData()
                  getData()
              })
              .finally(() => {
                  changeState.loading = false
              })
      }
      function cancelChangeData() {
          changeState.visible = false
          changeState.type = undefined
          changeState.content = undefined
          currentEditData.value = {}
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: undefinedpx;
  padding-right: 24px;
  padding-bottom: undefinedpx;
  padding-left: undefinedpx;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }
  .vid_73q2lq1lh6{
      padding-top:24px;
      padding-bottom:24px;
      background-color:#F70404
  }
  .vid_npj60brgix{
      box-shadow:0px 0px 0px 0px
  }
  .vid_arymfcbmea{
      box-shadow:0px 0px 0px 0px
  }

  /*样式*/

      .kb-table-box {
          position: relative;
          margin-bottom: 29px;
      }

      .load-btn {
          position: absolute;
          left: 50%;
          transform: translate(0, -50%);
          width: 120px;
          height: 16px;
          cursor: pointer;
          bottom: -20px;
      }

      .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #d7e3ff;
          color: #262626;
          font-weight: 600;
          padding: 0;
      }

      .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 0;

          .word-wrap {
              word-break: break-all !important;
          }
      }
      .target-table:deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #f5f8ff;
          color: #262626;
          font-weight: 600;
          padding: 0;
      }

      .target-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 0;

          .word-wrap {
              word-break: break-all !important;
          }
      }
      .color-div {
          position: relative;
          height: 26px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }

      .line-table {
          position: absolute;
          top: -5px;
          height: 50px;
          left: 50%;
          background-color: #fff;
          width: 1px;
          border-left: 1px dashed #3875ff;
      }

      .div-item {
          flex: 1;
      }

      .top-search {
          height: 64px;
          background-color: #fff;
          margin-bottom: 16px;
          border-radius: 4px;
          padding: 16px 24px;
      }

      .bottom-div {
          padding: 16px;
          background-color: #fff;
          border-radius: 4px;
          height: 100%;
      }

      .bottom-title {
          display: flex;
          justify-content: space-between;
          height: 16px;
          border-left: 4px solid #3875ff;
          font-size: 16px;
          line-height: 16px;
          padding-left: 8px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
          margin-bottom: 21px;
      }

      .modal-title {
          margin-bottom: 16px;
          display: flex;
          justify-content: space-between;
      }

      .left,
      .right {
          gap: 10px;
          display: flex;
          align-items: center;
      }

      .tip-color {
          display: flex;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
          align-items: center;
          gap: 4px;
      }

      .box1,
      .box2,
      .box3 {
          width: 32px;
          height: 8px;
          background: #ffe58f;
      }

      .box2 {
          background: #c7f870;
      }

      .box3 {
          background: #fc4c29;
      }

      .weight-font {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          text-align: right;
          font-weight: 500;
      }

      .text-line-white {
          text-decoration: underline;
          text-underline: #fff;
      }

      .text-line-black {
          text-decoration: underline;
          text-underline: #262626;
      }

      .arrow-father {
          position: relative;
      }

      .arrow-icon {
          position: absolute;
          right: 20px;
          top: 1px;
          cursor: pointer;
      }

      .colun-today {
          position: relative;
      }

      .today-line {
          position: absolute;
          top: -23px;
          height: 50px;
          left: 47%;
          background-color: #fff;
          width: 1px;
          border-left: 1px dashed #3875ff;
      }

      .today-flag {
          position: absolute;
          top: -23px;
          left: -8px;
          width: 35px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          background-color: #3875ff;
          text-align: center;
          opacity: 0.6;
      }

      .add-btn {
          position: absolute;
          right: 40px;
          color: #3875ff;
          top: 5px;
      }

      .module-item {
          position: relative;
      }

      .del {
          width: 28px;
          color: #3875ff;
          position: absolute;
          right: 0;
          top: 5px;
      }

      .form-content {
          display: inline-block;
          width: calc(100% - 110px);
      }

      .son-title {
          font-size: 12px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;
      }

      .week-content {
          white-space: pre-line; /* 保留换行符和多余空格 */
          cursor: pointer;
          height: 30px;
          overflow: hidden;
      }

      .target-div {
          cursor: pointer;
          width: 100px;
          overflow: hidden;
          white-space: nowrap;
          min-height: 20px;
          text-overflow: ellipsis;
      }

      .target-form :deep(.ant3-form-item-label) {
          width: 75px !important;
      }

      .default-goals {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100px;
      }

      .right-tip {
          height: 32px;
          line-height: 32px;
      }

      .week-tip,
      .right-tip-week {
          font-size: 14px;
          color: #262626;
          text-align: justify;
          font-weight: 400;
      }

      .default-gant-title {
          padding: 0 5px;
          width: 100px;
          overflow: hidden;
          white-space: nowrap;
      }
      .default-gant-title-xmjd,
      .default-gant-title-rwmc,
      .default-gant-title-total,
      .default-gant-title-zmb {
          padding: 0 5px;
          width: 100px;
          overflow: hidden;
          white-space: nowrap;
      }
      .default-gant-title-rwmc {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 300px;
      }
      /*.default-gant-title-total, .default-gant-title-zmb{
       white-space: wrap;
     }
     */

      .body {
          height: 100%;
      }

      .page_root {
          overflow: hidden !important;
      }

      .omit-div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100px;
      }

      .right-tip :deep(.ant3-select-selector) {
          overflow: auto;
          height: 32px;
      }

      /*重构*/
      .gd-item {
          margin: 5px;
          margin-bottom: 24px;
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
      }
      /*折叠面板样式*/
      .collapse-title {
          position: relative;
          width: 100%;
          display: flex;
          height: 56px;
          padding: 15px 24px;
          background-image: linear-gradient(270deg, rgba(237, 243, 255, 0.5) 0%, #d7e3ff 100%);
          align-items: center;
          //box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
          /* 如果需要保留左右两角的圆角，可以在这里添加 border-radius 样式 */
      }
      .collapse-title-left {
          display: flex;
          width: 70%;
          gap: 8px;
          align-items: center;
          padding-right: 16px;
      }
      .father-right {
          max-width: 94%; /* 限制宽度 */
          flex: 1;
          display: flex;
          flex-direction: column;
          padding-left: 13px;
          justify-content: space-between;
      }
      .father-right-btn {
          display: flex;
          gap: 8px;
          justify-content: end;
      }

      :deep(.ant3-collapse-header) {
          padding: 0 !important;
          border: none !important;
          color: #262626 !important;
          background: rgba(56, 117, 255, 0.1);
      }
      .active-icon {
          color: #3875ff;
          transform: rotate(90deg);
      }

      .title-text {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
      }

      .title-icon {
          background-image: url('@/assets/images/f8c7bba5acb9ba646cee45c24338b397.png');
          background-size: cover;
          height: 16px;
          width: 16px;
      }

      .item-inner {
          background-color: #fff;
          padding: 16px 24px;
          display: flex;
          flex-direction: column;
      }

      .inner-item {
          margin-bottom: 16px;
          display: flex;
      }

      .item-left {
          text-align: right;
          width: 100px;
      }

      .item-right {
          flex: 1;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
      }
      :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
          padding: 0 !important;
      }

      .table-top-title {
          display: flex;
          gap: 24px;
      }

      .table-top-title-text {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
      }

      .check-target {
          padding: 16px 0;
          border-bottom: 1px solid #3875ff;
          margin-bottom: 16px;
      }

      .scroll-content {
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100vh - 240px);
      }

      .item-right p {
          margin: 0;
      }
      .active-btn {
          position: relative;
          top: 2px;
          cursor: pointer;
      }
      .ratio-text {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
      }
      .no-data-msg {
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #595959;
      }
      .no-data-img {
          background-image: url('@/assets/images/eaf6b5e4041ad3049dc8148d88e8d86e.png');
          background-size: cover;
          width: 264px;
          height: 192px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      .week-title {
          text-decoration: underline;
      }
      .cursor-div {
          cursor: pointer;
      }
      /*重构*/
      /*样式*/
</style>